<page-header [title]="l('ManageBook')"></page-header>

<nz-card [nzBordered]="false">
  <div class="mb-md">
    <div nz-row nzGutter="8">
      <!-- 模糊搜索框 -->
      <div nz-col nzSpan="8" nzMd="12" nzXs="24" nzSm="24">
        <input type="text" nz-input [(ngModel)]="filterText" (keyup.enter)="refresh()"
          [placeholder]="l('SearchWithThreeDot')" />
      </div>
      <!-- 查询和刷新按钮 -->
      <div nz-col nzSpan="8" nzMd="12" nzXs="24" nzSm="24">
        <button nz-button nzType="primary" type="submit" (click)="refresh()">
          <span>{{ l('Search') }}</span>
        </button>
        <button nz-button nzType="default" type="submit" (click)="refreshGoFirstPage()">
          {{ l('Reset') }}
        </button>
      </div>
    </div>
  </div>
  <div class="mb-md">
    <!-- 增强型功能按钮位置 如： 添加、批量删除、导出Excel表 -->
    <div nz-row nzGutter="8">
      <div nz-col nzSpan="8" nzMd="12" nzXs="24" nzSm="24" class="btn-gutter">

        <button nz-button [nzType]="'primary'" *ngIf="isGranted('Pages.Book.Create')" (click)="createOrEdit()">
          <i class="iconfont icon-plus"></i>
          <span>
            {{l("Create")}}
          </span>
        </button>
        <!-- <button nz-button nzType="default" *ngIf="isGranted('Pages.Book.ExportExcel')" (click)="exportToExcel()">
          <i class="iconfont icon-file-excel"></i>
          <span>
            {{l("ExportToExcel")}}
          </span>
        </button> -->
        <ng-container *ngIf="selectedDataItems.length > 0">
          <button nz-button [nzType]="'danger'" *ngIf="isGranted('Pages.Book.BatchDelete')" (click)="batchDelete()">
            <i class="iconfont icon-delete"></i>
            <span>
              {{l("BatchDelete")}}
            </span>
          </button>
        </ng-container>
      </div>
    </div>
  </div>
  <!-- 多选框 判断选择了多少行数据，以及一个刷新按钮 -->
  <div class="my-md">
    <nz-alert [nzType]="'info'" [nzShowIcon]="true" [nzMessage]="message">
      <ng-template #message>
        <span [innerHTML]="l('GridSelectedXItemsTips',selectedDataItems.length)"></span>
        <a (click)="restCheckStatus(dataList)" class="ml-md">
          {{l('ClearEmpty')}}
        </a>
        <nz-divider nzType="vertical"></nz-divider>
        <a (click)="refreshGoFirstPage()">
          {{l('Refresh')}}
        </a>
      </ng-template>
    </nz-alert>
  </div>
  <!-- 实体的表格内容 -->
  <div nz-row nzGutter="8" class="my-md">
    <nz-table #ajaxTable nzSize="default" [nzData]="dataList" [nzTotal]="totalItems" [(nzPageIndex)]="pageNumber"
      [(nzPageSize)]="pageSize" (nzPageIndexChange)="pageNumberChange()" (nzPageSizeChange)="refresh()"
      [nzShowSizeChanger]="true" [nzShowQuickJumper]="true" [nzNoResult]="noDataTemplate"
      [nzShowTotal]="showTotalTemplate" [nzFrontPagination]="false" [nzScroll]="{ x: '1300px', y: '520px' }">
      <!-- [nzLoading]="isTableLoading" 要开启表格的loading状态，移动代码到上方 -->
      <!-- 暂无数据组件 -->
      <ng-template #noDataTemplate>
        <no-data></no-data>
      </ng-template>
      <!-- 分页信息显示 当前 1 页/共 3 页，共 5 条/显示 1-2 条 -->
      <ng-template #showTotalTemplate let-total let-range="range">
        {{l('GridFooterDisplayText',pageNumber,totalPages,total,range[0],range[1])}}
      </ng-template>
      <!-- 表头 -->
      <thead (nzSortChange)="gridSort($event)">
        <tr>
          <th nzBreakWord="true" nzAlign="center" nzWidth="50px" nzShowCheckbox [(nzChecked)]="allChecked"
            [nzDisabled]="allCheckboxDisabled" [nzIndeterminate]="checkboxIndeterminate"
            (nzCheckedChange)="checkAll($event)"></th>
          <th nzShowSort nzSortKey="ImgUrl" nzWidth="180px" nzAlign="left">
            <span>{{l('BookImgUrl')}}</span>

          </th>
          <th nzShowSort nzSortKey="Name" nzWidth="180px" nzAlign="left">
            <span>{{l('BookName')}}</span>

          </th>
          <th nzShowSort nzSortKey="Author" nzWidth="180px" nzAlign="left">
            <span>{{l('BookAuthor')}}</span>

          </th>
          <th nzShowSort nzSortKey="PriceUrl" nzWidth="180px" nzAlign="left">
            <span>{{l('BookPriceUrl')}}</span>

          </th>

          <th nzShowSort nzSortKey="Intro" nzWidth="180px" nzAlign="left">
            <span>{{l('BookIntro')}}</span>

          </th>
          <th nzWidth="230px" nzAlign="center">
            <span>{{l('Actions')}}</span>
          </th>
        </tr>
      </thead>
      <!-- 表格内容 -->
      <tbody>
        <tr *ngFor="let item of ajaxTable.data">
          <!-- Checkbox多选框 -->
          <td nzAlign="center" nzShowCheckbox [(nzChecked)]="item.checked"
            (nzCheckedChange)="refreshCheckStatus(dataList)"></td>
          <td nzAlign="left">
            <img [src]="item.ImgUrl" alt="封面图片" (click)="imgShow(item.ImgUrl)">
          </td>
          <td nzAlign="left">
            <ellipsis lines="2" tooltip>
              <span>
                {{item.name}}
              </span>
            </ellipsis>
          </td>
          <td nzAlign="left">
            <ellipsis lines="2" tooltip>
              <span>
                {{item.author}}
              </span>
            </ellipsis>
          </td>
          <td nzAlign="left">
            <ellipsis lines="2" tooltip>
              <span>
                {{item.priceUrl}}
              </span>
            </ellipsis>
          </td>
          <td nzAlign="left">
            <ellipsis lines="2" tooltip>
              <span>
                {{item.intro}}
              </span>
            </ellipsis>
          </td>

          <td>
            <!-- 编辑 -->
            <ng-container *ngIf="isGranted('Pages.Book.Edit')">
              <a (click)="createOrEdit(item.id)">
                <i class="iconfont icon-edit mr-sm"></i>
                <span>{{l('Edit')}}</span>
              </a>
              <nz-divider nzType="vertical"></nz-divider>
            </ng-container>
            <!-- 更多 -->
            <ng-container *ngIf="isGrantedAny('Pages.Book.Create', 'Pages.Book.Delete')">
              <a nz-dropdown [nzDropdownMenu]="actionDropdownMenu">
                <span>{{ l('More') }}</span>
                <i class="iconfont icon-down"></i>
              </a>
              <nz-dropdown-menu #actionDropdownMenu="nzDropdownMenu">
                <ul nz-menu>
                  <li nz-menu-item>
                    <a *ngIf="isGranted('Pages.Book.Create')" (click)="createOrEdit()">
                      <i class="iconfont icon-plus"></i>{{ l('Create') }}
                    </a>
                  </li>
                  <li nz-menu-divider></li>
                  <!-- 删除 -->
                  <li nz-menu-item *ngIf="isGranted('Pages.Book.Delete')">
                    <a nz-popconfirm [nzPopconfirmTitle]="l('ConfirmDeleteWarningMessage')" (nzOnConfirm)="delete(item)"
                      [nzOkText]="l('Ok')" [nzCancelText]="l('Cancel')">
                      <i class="iconfont icon-delete mr-sm"></i>
                      <span>{{ l('Delete') }}</span>
                    </a>
                  </li>
                </ul>
              </nz-dropdown-menu>
            </ng-container>
          </td>
        </tr>
      </tbody>
    </nz-table>
  </div>
</nz-card>
